<template>
  <div class="content"
       v-loading="loading">
    <el-card class="box-card"
             v-for="(data,index) in dataList"
             :key="index">
      <div slot="header"
           class="clearfix">
        <span>{{data.title}}</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text"
                   @click="hanldClickOperation(data)">操作</el-button>
      </div>
      <div class="text item">
        <p>{{data.article}}</p>
        <span class="time">发布时间: {{data.date.slice(0,10)}}</span>
      </div>
    </el-card>

    <el-divider class="divider"
                v-if="divider"><span>暂无更多了</span></el-divider>
  </div>
</template>

<script>
export default {
  name: "content",
  data () {
    return {
      dataList: [],
      loading: true,
      divider: false
    }
  },
  methods: {
    // 操作点击
    hanldClickOperation (data) {
      console.log(data);
      this.$router.push("/login");
    }
  },
  mounted () {
    this.$axios.get("http://localhost:5000/api/profile").then(res => {
      console.log(res);
      this.dataList = res.data.data;
      if (this.dataList.length < 1) {
        this.$message({
          message: '暂无内容哦',
          type: 'warning'
        });
      }
      this.divider = true;
      this.loading = false;
    })
  }
}
</script>

<style scoped>
.content {
  width: 98%;
  height: 100%;
  margin: 0 auto;
}
.box-card {
  margin: 2% 0;
}
.time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
}
.divider {
  margin-top: 10%;
}
.divider span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}
</style>